const headerEl = document.querySelector('header')
const scrollToTop = document.querySelector('.scrollToTop')
window.addEventListener('scroll', () => {
  let height = window.scrollY
  const { height: headerHeight } = headerEl.getBoundingClientRect()
  if (height - headerHeight > 800) {
    if (!headerEl.classList.contains('sticky')) {
      headerEl.classList.add('sticky')
    }
  } else {
    headerEl.classList.remove('sticky')
  }

  if (height > 2000) {
    scrollToTop.style.opacity = '1'
  } else {
    scrollToTop.style.opacity = '0'
  }

})

const glide = new Glide('.glide');
// 轮播动画的实例元素
const captionsEl = document.querySelectorAll('.slide-caption');
// 轮播动画的配置, 在挂载和运行之后，执行动画
glide.on(['mount.after', 'run.after'], () => {
  const caption = captionsEl[glide.index];
  anime({
    targets: caption.children,
    opacity: [0, 1],
    duration: 400,
    easing: 'linear',
    delay: anime.stagger(400, { start: 300 }),
    translateY: [anime.stagger([40, 10]), 0]
  });
})
// 在开始轮播之前，先将所有的轮播元素的透明度设置为0
glide.on('run.before', () => {
  document.querySelectorAll('.slide-caption > *').forEach(el => {
    el.style.opacity = 0;
  });
});
// 挂载轮播动画
glide.mount();

// 成功案例
// 初始化isotope
const isotope = new Isotope(".cases", {
  // 适应行布局，每行宽度一样
  layoutMode: "fitRows",
  // 每个案例的class选择器
  itemSelector: ".case-item"
  // percentPosition: true
});

const filterBtns = document.querySelector(".filter-btns");

filterBtns.addEventListener("click", e => {
  let { target } = e
  const filterOption = target.getAttribute("data-filter")
  if (filterOption) {
    document.querySelectorAll(".filter-btn.active").forEach(btn => btn.classList.remove("active"))
    target.classList.add("active")
    isotope.arrange({ filter: filterOption })
  }

})

// 服务流程的动画
const staggeringOption = {
  delay: 300,
  distance: '50px',
  duration: 500,
  easing: 'ease-in-out',
  origin: 'bottom'
}


ScrollReveal().reveal('.feature', {
  ...staggeringOption, interval: 60
})
ScrollReveal().reveal('.service-item', {
  ...staggeringOption, interval: 60
})

// 数据部分
const dataSectionEl = document.querySelector('.data-section')
ScrollReveal().reveal('.data-section', {
  beforeReveal: () => {
    anime({
      targets: '.data-piece .num',
      innerHTML: el => {
        return [0, el.innerHTML]
      },
      duration: 2000,
      round: 1,
      easing: 'easeInExpo',
    })
    dataSectionEl.style.backgroundPosition = `center calc(50% - ${dataSectionEl.getBoundingClientRect().bottom / 5}px)`
  }
})
// 背景图片的移动
window.addEventListener('scroll', () => {
  const { bottom } = dataSectionEl.getBoundingClientRect()
  const { height } = dataSectionEl.getBoundingClientRect()
  if (bottom > height) {
    dataSectionEl.style.backgroundPosition = `center calc(50% - ${bottom / 5}px)`
  }
})

// 流畅滚动
// const scroll = new SmoothScroll('nav a[href*="#"], .scrollToTop a[href*="#"]', {
//   // 自动计算固定导航的高度
//   header: "header",
//   // 偏移80象素
//   offset: 80
// });

// 探索更多按钮处理
document.querySelectorAll('.explore-btn').forEach(el => {
  el.addEventListener('click', () => {
    document.querySelector('#about-us').scrollIntoView(true)
  })
})

// 折叠按钮
const burgerEl = document.querySelector('.burger')
burgerEl.addEventListener('click', () => {
  headerEl.classList.toggle('open')
})

// 折叠菜单打开时，如果点击了链接，则自动关闭全屏导航
document.addEventListener("scrollStart", () => {
  if (headerEl.classList.contains("open")) {
    headerEl.classList.remove("open");
  }
});